<template>
  <div class="Onecardtour" ref="homePage">

    <div class="bj">
      <van-nav-bar @click-left="clickleft" style="background: #ececec;" title="一卡通" left-text=""
        left-arrow>
        <!-- <div slot="right" class="searcha"> -->

      </van-nav-bar>
    </div>
    <div style="width: 100%;height: 46px;"></div>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多数据了哦" @load="onLoad">
      <div v-for="(itme,index) in datalist" class="through">
        <div class="through_txt">{{itme.Name}}<span style="color: #d2d2d6;font-size: 12px;margin-left: 10px;">{{itme.Info}}</span></div>
        <div class="through_img">
          <img :src="itme.Cover" />
        </div>
        <div class="through_chakan" @click="product(itme.resSN)">查看详情</div>
      </div>
    </van-list>
  </div>
</template>

<script>
  // import city from '@/assets/js/city.js'
  // import AMap from "AMap"
  // import min from '@/views/Min.vue'
  import {
    resourceList
  } from '@/api/home.js'
  export default {

    data() {
      return {
        clintHeigth: '', //获取页面高度
        datalist: [],
        loading: false, //控制上拉加载的加载动画
        finished: false, //控制在页面往下移动到底部时是否调用接口获取数据
        totalPage: 0,
        pageNumber: 0, //自定义一个变量
        // name:'',
      }
    },
    methods: {
      onLoad() {
        let self = this;
        // let mylan = this.lan +','+this.lat
        // console.log(this.lan)
        setTimeout(() => {
          let data = {
            PageNo: self.pageNumber + 1,
            // MyLng: mylan, //经纬度
            Category: 7,
            // City: this.current, //城市
            // Name: this.search_value, //搜索
          };
          resourceList(data).then(res => {
            console.log(res)
            self.totalPage = res.PageCount;

            if (res.List.length > 0) {
              self.datalist = self.datalist.concat(res.List);
            } else {
              this.datalist = res.List
            }
            self.loading = false;
            self.pageNumber++;
            if (self.pageNumber >= self.totalPage) {
              self.finished = true;
            }
          });
        }, 500);
      },
      //点击跳转
      clickleft() {
        this.$router.go(-1);
      },
      product(resSN) {
        this.$router.push({
          path: "/specialty/Specialtydetails",
          query:{
            resSN:resSN,
          }
        })
      },
    },
    mounted() {

      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
      //console.log(this.partInfo);
    },

  }
</script>
<style lang="scss">
  .Onecardtour {

    // background: #46d0ca;
    .bj {
      .van-icon {
        color: white !important;

      }
    }

    .through {
      width: 90%;
      margin: 0 auto;
      height: 230px;
      border-radius: 15px;
      background: white;
      margin-top: 20px;

      .through_txt {
        padding: 10px 20px;
        // color: #000000;
        font-size: 16px;
      }

      .through_img {
        width: 90%;
        height: 110px;
        margin: 0 auto;
        // background: url(../../assets/Onecardtour/yika.jpg) no-repeat;
        background-size: 100%;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .through_chakan {
        width: 150px;
        height: 35px;
        line-height: 35px;
        background: #46d0ca;
        margin: 0 auto;
        color: white;
        border-radius: 20px;
        text-align: center;
        margin-top: 20px;
        font-size: 14px;
      }
    }

  }
</style>
